<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test for jQuery validate() plugin</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<style type="text/css">
.warning { color: red; }
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
<script src="../jquery.metadata.js" type="text/javascript"></script>
<script src="../jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
	jQuery(function() {
		// show a simple loading indicator
		var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..." /></div>')
			.css({position: "relative", top: "1em", left: "25em"})
			.hide()
			.appendTo("body");
		jQuery().ajaxStart(function() {
			loader.show();
		}).ajaxStop(function() {
			loader.hide();
		});
		
		jQuery().ajaxError(function(a, b, e) {
			throw e;
		});
		
		jQuery.validator.setDefaults({
			debug: true
		});
		
		
		var v = jQuery("#form").validate({
			submitHandler: function(form) {
				jQuery(form).ajaxSubmit({
					dataType: "json",
					after: function(result) {
						if(result.status) {
							v.showErrors(result.data);
							v.focusInvalid();
						}	
					}
				});
			}
		});
		
		jQuery("#reset").click(function() {
			v.resetForm();
		});
	});
</script>

</head>
<body>
<form method="get" class="cmxform" id="form" action="form.php">
	<fieldset>
		<legend>Login Form (Enter "foobar" as password)</legend>
		<p>
			<label for="user">Username</label>
			<input id="user" name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minLength:3}" />
		</p>
		<p>
			<label for="pass">Password</label>
			<input type="password" name="password" id="password" class="{required:true,minLength:5}" />
		</p>
		<p>
			<input class="submit" type="submit" value="Login"/>
		</p>
	</fieldset>
</form>

<button id="reset">Programmatically reset above form!</button>

<div id="result">Please login!</div>

<a href="index.html">Back to main page</a>

<p>Backend file: <a href="form.php">form.phps</a></p>

</body>
</html>